<template>
	<view>
		<view class="sick_form" :class="formShow ? 'on' : ''">
			<text class="iconfont icon-guanbi" @click="close"></text>
			<view class="title">您需要为谁复诊开方</view>
			<form class="form" @submit="formSubmit">
				<view class="person_list acea-row">
					<view
						class="item"
						v-for="(item, index) in personList"
						:key="index"
						:class="current == index ? 'on' : ''"
						:style="current == index ? 'border-color: #6f8dcb;background: rgba(87, 150, 254, 0.07);' : ''"
						@click="personChange(index)"
					>
						<text class="iconfont icon-shanchu" @click.stop="delHandle(item)"></text>
						<view class="name">{{ item.patient_name }}</view>
						<view class="acea-row row-middle info">
							<image src="/static/images/icon_man.png" v-if="item.patient_gender == 1"></image>
							<image src="/static/images/icon_woman.png" v-if="item.patient_gender == 2"></image>
							{{ item.patient_gender == 1 ? '男' : '女' }} {{ item.patient_age }}岁
						</view>
						<text class="iconfont icon-xuanzhong4" v-if="current == index"></text>
					</view>
					<view class="item acea-row row-center-wrapper add" @click="addSick"><text class="iconfont icon-jiahao2"></text></view>
				</view>
				<view class="form_item" v-if="formData.disease_json.length" v-for="(item,index) in formData.disease_json" :key="index">
					<view class="label">
						是否{{item.icd_name}}
						<text>*</text>
					</view>
					<view class="radio">
						<radio-group name="" @change="(e) => radioChange(e,item,index)">
							<radio value="1" :checked="item.isChecked" color="#09ba08">是</radio>
							<radio value="0" :checked="!item.isChecked" color="#09ba08">否</radio>
						</radio-group>
					</view>
				</view>
				<view class="protocol" v-if="article_id">
					<checkbox-group @change='ChangeIsDefault'>
						<checkbox
							:class="inAnimation?'trembling':''"
							@animationend='inAnimation==false'
							:checked="protocol ? true : false"
						/>
						确认已知晓处方药必须凭处方在药师指导下购买和使用；确认已经在线下就诊并使用过订单中的药品，且无不良反应；确认提交真实问诊信息用于互联网医院医生复诊并开方使用。我已阅读并同意 
						<text class="main-color" @click="privacy()">《{{article_title}}》</text>
					</checkbox-group>
				</view>
				<button class="sub_btn" form-type="submit">申请复诊开方</button>
			</form>
		</view>
		<view class="mask" v-show="formShow" @click="close"></view>
	</view>
</template>

<script>
import { subMedical, delInquiry, goodsIcdApi } from '@/api/user';
export default {
	name: 'sickForm',
	props: {
		formShow: {
			type: Boolean,
			default: false
		},
		personList: {
			type: Array,
			default: []
		},
		article_title: {
			type: String,
			default: ''
		},
		article_id: {
			type: Number,
			default: 0
		}
		// order_id: {
		// 	type: String,
		// 	default: ''
		// }
	},
	watch: {
		personList(val) {
			var _this = this;
			val.forEach((item, index) => {
				if (item.is_default == 1) {
					_this.current = index;
					_this.formData.inquiry_id = item.inquiry_id;
				}
			});
		}
	},
	data() {
		return {
			current: 0,
			formData: {
				inquiry_id: '',
				order_id: '',
				disease_json: []
			},
			order_id: '',
			icdList: [],
			protocol: false,
			inAnimation:false
		};
	},
	created() {
	},
	methods: {
		close() {
			this.$emit('closeHandle');
		},
		addSick() {
			uni.navigateTo({
				url: '/pages/users/add_sick/index'
			});
		},
		getGoodsIcd() {
			let that = this;
			uni.showLoading({
				title: '加载中'
			});
			goodsIcdApi({
				order_id: this.order_id
			}).then(res => {
				uni.hideLoading();
				let data = res.data.list;
				if(data.length > 0){
					for (var i = 0; i < data.length; i++) {
						data[i].isChecked = false;
					}
					that.formData.disease_json = data;
				}else{
					that.$util.Tips({ title: res.data.message });
					that.close()
				}
			}).catch(err => {
				uni.hideLoading();
				return that.$util.Tips({ title: err });
			})
		},
		radioChange(e,item,index) {
			if(e.target.value == 1) {
				this.formData.disease_json[index].isChecked = true;
			} else {
				this.formData.disease_json[index].isChecked = false;
			}
		},
		ChangeIsDefault(e) {
			this.protocol = !this.protocol;
		},
		privacy() {
			console.log(this.article_id);
			uni.navigateTo({
				url: "/pages/users/privacy/index?article_id=" + this.article_id
			})
		},
		personChange(index) {
			this.current = index;
			if (this.current != index) {
				this.current = index;
				this.formData.inquiry_id = this.personList[index].inquiry_id;
			}
		},
		// 删除
		delHandle(item) {
			var _this = this;
			uni.showModal({
				title: '提示',
				content: '确认要删除吗？',
				success(result) {
					if (result.confirm) {
						delInquiry({ id: item.id })
							.then(res => {
								_this.$util.Tips({ title: res.message, icon: 'success' });
								uni.$emit('createInquiry');
							})
							.catch(err => {
								return _this.$util.Tips({ title: err });
							});
					}
				}
			});
			return false;
		},
		formSubmit(e) {
			var _this = this;
			var formData = e.detail.value;
			let isNotCheck = false;
			formData.order_id = _this.order_id;
			if(_this.personList.length) {
				formData.inquiry_id = _this.personList[_this.current].id;
			} else {
				return _this.$util.Tips({ title: '请添加就诊人' });
			}
			if (!formData.inquiry_id) {
				return _this.$util.Tips({ title: '请选择就诊人！' });
			}
			if(!_this.protocol) {
				return _this.$util.Tips({ title: '请阅读并确认勾选知情同意协议' });
			}
			// for(var i = 0; i < _this.formData.disease_json.length; i++) {
			// 	if(_this.formData.disease_json[i].isChecked === '') {
			// 		isNotCheck = true
			// 	}
			// }
			formData.disease_json = _this.formData.disease_json;
			// if(isNotCheck) {
			// 	return _this.$util.Tips({ title: '请选择就诊人病史情况！' });
			// }
			uni.showLoading({
				title: '提交中',
				mask: true
			})
			subMedical(formData)
				.then(res => {
					console.log(res)
					_this.$util.Tips({ title: res.message, icon: 'success' });
					_this.$emit('successHandle');
					_this.close();
					uni.hideLoading();
					_this.$util.Tips({ title: res.msg });
				})
				.catch(err => {
					uni.hideLoading();
					_this.$emit('failHandle');
					_this.$util.Tips({ title: err });
				});
		}
	}
};
</script>

<style lang="scss">
.sick_form {
	position: fixed;
	bottom: 0;
	width: 100%;
	left: 0;
	background: #fff;
	border-radius: 20rpx 20rpx 0 0;
	z-index: 77;
	transform: translate3d(0, 100%, 0);
	transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
	&.on {
		transform: translate3d(0, 0, 0);
	}
	.icon-guanbi {
		position: absolute;
		font-size: 30rpx;
		top: 55rpx;
		right: 35rpx;
		color: #ccc;
	}
	.title {
		padding: 40rpx 25rpx;
		font-size: 32rpx;
	}
	.form {
		padding: 10rpx 30rpx 30rpx 30rpx;
		max-height: 1000rpx;
		overflow-y: scroll;
		display: block;
	}
	.person_list {
		margin-bottom: 60rpx;
		.item {
			padding: 25rpx 0 28rpx 30rpx;
			border: solid 1px #e5e5e5;
			border-radius: 10rpx;
			width: 214rpx;
			height: 152rpx;
			margin: 20rpx 20rpx 0 0;
			position: relative;
			overflow: hidden;
			.icon-shanchu {
				position: absolute;
				top: 12rpx;
				right: 12rpx;
				z-index: 1;
			}
			.info {
				margin-top: 15rpx;
				image {
					width: 30rpx;
					height: 30rpx;
					display: block;
					margin-left: -4rpx;
					margin-right: 10rpx;
				}
			}
			&:nth-child(3n) {
				margin-right: 0;
			}
			&.add {
				border: dashed 1px #e5e5e5;
				padding: 0;
				.iconfont {
					font-size: 38rpx;
					color: #ccc;
				}
			}
			&.on {
				border-color: #6f8dcb;
				background: rgba(87, 150, 254, 0.07);
			}
			.icon-xuanzhong4 {
				position: absolute;
				right: -6rpx;
				bottom: -10rpx;
				font-size: 50rpx;
				color: #5796fe;
			}
		}
	}
	.form {
		.form_item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 40rpx;
			.label {
				text {
					color: $theme-color;
				}
			}
			.radio {
				radio {
					margin-left: 40rpx;
				}
			}
			textarea {
				display: block;
				width: 100%;
				height: 140rpx;
				border-radius: 10rpx;
				background: #eee;
				margin-top: 15rpx;
				padding: 15rpx;
				font-size: 28rpx;
				box-sizing: border-box;
			}
		}
		.sub_btn {
			width: 100%;
			height: 90rpx;
			color: #fff;
			background: $theme-color;
			font-size: 30rpx;
			line-height: 90rpx;
			border-radius: 45rpx;
			margin: 50rpx 0 10rpx 0;
		}
	}
}
.protocol {
	margin-top: 40rpx;
	color: #999999;
	font-size: 24rpx;
}
.trembling {
	animation: shake 0.6s;
}
.main-color {
	color: var(--view-theme);
}
/deep/ radio .wx-radio-input.wx-radio-input-checked {
	border: 1px solid #09ba08 !important;
	background-color: #09ba08 !important;
}
/deep/ radio .uni-radio-input.uni-radio-input-checked {
	border: 1px solid #09ba08 !important;
	background-color: #09ba08 !important;
}
</style>
